<template>
  <div>
    <div class="top-user">
      <div class="avatar">{{ course }}签到记录</div>
      <div class="name" @click="showDate = true"> {{ time }} </div>
    </div>
    <div class="user-list">
      <div class="user-item" v-for="(item, index) in list" :key="index">
        <div class="avatar"><img :src="item.head_sculpture ? item.head_sculpture : avatar" alt="" width="100%"></div>
        <div class="name">
          <div class="nickname">
            <p>{{ item.name }}</p>
            <p>{{ item.phone }}</p>
          </div>
          <div class="status">{{ item.status === 1 ? '已签到' : (item.status === 2 ? '请假' : '未签到') }}</div>
        </div>
      </div>
    </div>
    <div class="nothing" v-if="list.length === 0">无记录</div>
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="birthday"
        type="date"
        @cancel="showDate = false"
        @confirm="dateConfirm"
        :max-date="maxDate"/>
    </van-popup>
  </div>
</template>

<script>
import api from '@/api'
import {birthdayHandle} from '@/utils'
export default {
  name: 'course-record-detail',
  data () {
    return {
      list: [],
      course: '',
      id: '',
      time: '',
      showDate: false,
      birthday: new Date(),
      maxDate: '',
      avatar: require('@/assets/img/icon-avatar.png')
    }
  },
  methods: {
    getList (time) {
      let params = {
        id: this.id,
        sktime: time
      }
      api.teacherRecodeDetail({
        params,
        callback: res => {
          if (res.data.error_code === 0) {
            this.list = res.data.data
          }
        }
      })
    },
    dateConfirm () {
      this.time = birthdayHandle(this.birthday).split('-').join('.')
      this.getList(this.birthday.valueOf() / 1000)
      this.showDate = false
    }
  },
  created () {
    this.course = this.$route.query.name
    this.id = this.$route.query.id
    this.maxDate = new Date()
    this.time = birthdayHandle(new Date()).split('-').join('.')
    this.getList(Math.floor(new Date().valueOf() / 1000))
  }
}
</script>

<style scoped>
  .top-user{
    display: flex;
    height: 40px;
    padding: 15px;
    align-items: center;
    justify-content: space-between;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
    margin-bottom: 10px;
  }
  .top-user .avatar{
    font-size:18px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:25px;
    color:rgba(30,30,30,1);
  }
  .top-user .name{
    font-size:13px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:18px;
    color:rgba(30,30,30,1);
  }
  .user-list{
    margin-top: 10px;
  }
  .user-item{
    display: flex;
    padding: 0 10px 10px 10px;
    align-items: center;
  }
  .user-item .avatar{
    width: 50px;
    margin-right: 20px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .user-item .name{
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.3);
  }
  .user-item .name p:nth-child(1) {
    font-family:PingFang SC;
    font-weight:bold;
    line-height: 30px;
  }
  .user-item .name p:nth-child(2) {
    font-size: 14px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
  }
  .user-item .name .status{
    font-family:PingFang SC;
    font-weight:bold;
    line-height:25px;
    color:rgba(102,102,102,1);
  }
  .nothing{
    color: #666;
    font-size: 18px;
    text-align: center;
    padding: 10px 0;
  }
</style>
